
<%--引使用webjars方式引入(pom文件中引入)--%>
<link rel="stylesheet" href="webjars/bootstrap/3.4.1/dist/css/bootstrap.min.css">
<script src="webjars/jquery/3.6.0/dist/jquery.min.js"></script>
<script src="webjars/bootstrap/3.4.1/dist/js/bootstrap.min.js"></script>

<%--3. 使用idea中bootstrap插件的快捷键：bs3 + （快捷键：ctrl + j ）--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>商品列表展示</title>
    <style>
        .container{ /*设置上边距*/
            margin-top: 20px;
        }
        .table{ /*设置格式居中*/
            text-align: center;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">商品列表</div>
        <table class="table table-bordered table-striped table-hover">
            <tr>
                <td>商品编号</td>
                <td>商品名称</td>
                <td>商品单价</td>
                <td>剩余数量</td>
                <td>加入购物车</td>
            </tr
            <c:forEach items="${products}" var="p">
                <tr>
                        <%-- 上面用forEach遍历map里的数据，现在将遍历的值赋给相应的标题（上面的突然tr） --%>
                    <td>${p.value.pid}</td>
                    <td>${p.value.pname}</td>
                    <td>${p.value.price}</td>
                    <td>${p.value.quantity}</td>
                    <td>
                            <%-- 给加入购物车赋予超链接，点击跳进购物车页面 --%>
                        <a href="/cart?cmd=add&pid=${p.value.pid}"  class="btn btn-success btn-sm" >加入购物车</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <div class="panel-footer text-right">
            欢迎光临
        </div>
    </div>
</div>

</body>
</html>
